{% extends 'base.html' %}

{% block title %}
    惠房网-惠房用户中心
{% endblock %}

{% block styles %}
    {{ super() }}
    <!-- 引用用户中心的center.css样式文件 -->
    <link rel="stylesheet" href="{{ url_for('static',filename='css/user/center.css') }}">
{% endblock %}

{% block content %}
    {% block newcontent %}
        <!-- logo模块 -->
        <div class="header w">
          <div class="logo">
            <img src="{{ url_for('static',filename='images/hz_logo.png') }}" alt="">
            <div class="title">
              <span class="pub_time">早上好</span> · 
              <span>惠房用户</span>
            </div>
          </div>
        </div>

        <!-- 内容 -->
        <div id="container">
          <div id="left">
            <p>信息修改</p>

            <p>上传相册</p>

            <p>关于我设置</p>
          </div>
          <div id="right">
            <div class="right-item" id="first">
                {% if msg %}
                    <script>alert('{{ msg }}')</script>
                {% endif %}
              <h2>用户信息更改</h2>
              <form action="{{ url_for('user_bp.info_modify') }}" method="post" enctype="multipart/form-data">
                <span class="username">
                  <label for="#" class="labels">用户名：</label>
                  <input type="text" class="form-control inputs" id="InputUsername" name="username" value="{{ g.user.username }}"/>
                </span>
                <span class="Phone">
                  <label for="#" class="labels">手机号码：</label>
                  <input type="text" class="form-control inputs" id="InputPhone" name="phone" value="{{ g.user.phone }}"/>
                  <span> </span>
                </span>
                <span>
                  <label for="#" class="labels">邮箱：</label>
                  <input type="email" class="form-control inputs" id="InputEmail1" name="email" value="{{ g.user.email }}"/>
                </span>
                <span>
                  <label for="#" class="labels" style="line-height: 22px;">上传头像：</label>
                  <input type="file" id="exampleInputFile" name="icon" />
                </span>
                <p><img src="{% if g.user.icon %} {{ url_for('static',filename=user.icon) }} {% else %}{{ url_for('static',filename='images/touxiang.jpg') }}{% endif %}" alt="" width="90" height="100"/></p>
                <p><button type="submit" class="btn btn-primary">确定更改</button></p>
              </form>
            </div>

            <div class="right-item" id="last">
              <form action="{{ url_for('user_bp.upload_photo') }}" method="post" enctype="multipart/form-data" class="form-inline">
                <span class="upload_photo">
                  <label for="#" class="labels">上传相册：</label>
                  <input type="file" class="form-control inputs" name="photo"/>
                    <input type="submit" value="上传"  class="btn btn-default" />
                </span>
              </form>
              <div class="row">
                <div class="col-sm-12">
                  <h3>我的相册</h3>
                  <div class="row">
                    {% for photo in photos %}
                        <div class="col-xs-8 col-sm-4">
                            <img src="http://qm5by3x06.hn-bkt.clouddn.com/{{ photo.photo_name }}" alt="..." class="img-rounded image"/>
                            <button class="btn btn-info btn-xs photo-del" tag="{{ photo.id }}">删除</button>
                        </div>
                    {% endfor %}
                  </div>
                </div>
              </div>
            </div>


            <div class="right-item" style="padding-top: 30px">
              <form action="#" method="post" enctype="multipart/form-data">
                <p>
                  <textarea name="about" class="mytextarea"> </textarea>
                </p>
                <p></p>
                <p style="text-align: right">
                  <button type="submit" class="btn btn-primary">更改我的</button>
                </p>
              </form>
            </div>
          </div>
        </div>
    {% endblock %}
{% endblock %}

{# 添加js脚本 #}
{% block scripts %}
    {{ super() }}
    <script src="{{ url_for('static',filename='js/tinymce.min.js') }}"></script>
    <script>
        // 一、分时问候
        // 1.获取元素
        var pubtime = document.querySelector('.pub_time');
        // 2. 得到当前的小时数
        var date = new Date();
        var h = date.getHours();
        // 3. 判断小时数文字信息
        if (h < 12) {
          pubtime.innerHTML = '早上好';
        } else if (h < 18) {
          pubtime.innerHTML = '下午好';
        } else {
          pubtime.innerHTML = '晚上好';
        }

        $(function () {
            //设置富文本
            tinymce.init({
                selector: '.mytextarea',
                height: 400,
                plugins: "quickbars emoticons",
                inline: false,
                toolbar: true,
                menubar: true,
                quickbars_selection_toolbar: 'bold italic | link h2 h3 blockquote',
                quickbars_insert_toolbar: 'quickimage quicktable',

            });

            $('.right-item').hide();
            $('.right-item').eq(0).show();
            $("#left p").first().css({'background-color': '#101d37'});
            //切换右侧div
            $("#left p").each(function (i) {
                $(this).click(function () {
                    $("#left p").css({'background-color': '#fff'});
                    $(this).css({'background-color': '#101d37', 'box-shadow': '5px 5px 5px #999'});
                    $('.right-item').hide();
                    $('.right-item').eq(i).show();
                });
            });

            // 相册图片的删除
            $('.photo-del').click(function () {
                // console.log('---------->')
                flag = confirm('确定删除此图片吗？');
                if (flag) {
                    // 获取属性值tag，tag属性的是就是图片的主键
                    let pid = $(this).attr('tag');
                    // 1.ajax，2.location.href
                    location.href='/user/del_photo?pid=' + pid;
                };
            });
        });

    </script>
{% endblock %}